---
title: "Button"
description: Buttons play a crucial role in functionality, whether for submitting a form or navigating to another page.
order: 1
published: true
references: ["https://react-spectrum.adobe.com/react-aria/Button.html#props"]
---

## Basic
A button allows users to perform actions through clicks, presses, taps, or keystrokes.
<How toUse="buttons/button/button-basic-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/button
```

## Manual installation

```bash
npm i react-aria-components tailwind-variants
```

<SourceCode toShow='button'/>

## Anatomy
```
import { Button } from "@/components/ui/button"
import { IconSettings } from "@heroicons/react"
```

```
<>
  <Button intent="primary">Primary</Button>
  <Button intent="secondary">Secondary</Button>
  <Button intent="warning">Warning</Button>
  <Button intent="danger">Danger</Button>
  <Button intent="outline">Outline</Button>
  <Button intent="plain">Plain</Button>

  <Button size="xs">Extra small</Button>
  <Button size="sm">Small</Button>
  <Button size="md">Medium</Button>
  <Button size="lg">Large</Button>

  <Button size="sq-xs"><IconSettings/></Button>
  <Button size="sq-sm"><IconSettings/></Button>
  <Button size="sq-md"><IconSettings/></Button>
  <Button size="sq-lg"><IconSettings/></Button>
</>
```


## Intent
Buttons come in different intents, each with its own color scheme.

<How toUse="buttons/button/button-intent-demo" />

## Shape
Buttons support various shapes to fit different design needs.

<How toUse="buttons/button/button-shape-demo" />

## Size
Buttons are available in multiple sizes.

<How toUse="buttons/button/button-size-demo" />

## With icon
You can add icons to buttons, and their color will match the button's color.

<How toUse="buttons/button/button-icon-demo" />

## Disabled
A disabled button cannot be interacted with and is visually styled to reflect its state.

<How toUse="buttons/button/button-disabled-demo" />

## Pending
A button can indicate a pending state using the `isPending` prop. This provides feedback for actions that take time, communicates the status to assistive technologies, and disables interactions except for focus.

<How toUse="buttons/button/button-pending-demo" />

## With loader
You can add a loader to indicate ongoing processes.

<How toUse="buttons/button/button-loader-demo" />

## Link
Sometimes, you need to use styles from buttons for links. Just use the link and use the `buttonStyles` to the className prop.
<How toUse="buttons/button/button-link-demo" />

## Touch hitbox
Sometimes you may want to use this button with only an icon. In that case, you can apply the `touch-target` utility class on the `sq-*` size to increase the button’s hitbox for improved accessibility.
```css
@utility touch-target {
  position: relative;
  &::before {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    min-height: 44px;
    min-width: 44px;
    z-index: 9999;
  }
}
```
